<template>
  <view class="article-detail-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <uni-icon type="spinner" size="50" color="#1989fa" animation="spin"></uni-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 文章内容 -->
    <view v-else>
      <!-- 文章标题 -->
      <view class="article-header">
      <view class="article-title">{{ article.title }}</view>
      
      <!-- 作者信息 -->
      <view class="author-section">
        <image class="author-avatar" :src="article.authorAvatar" mode="aspectFill"></image>
        <view class="author-info">
          <view class="author-name">{{ article.authorName }}</view>
          <view class="publish-time">
            <text>创建于 {{ formatDateTime(article.createdAt) }}</text>
            <text v-if="article.updatedAt !== article.createdAt" class="update-time"> · 最后编辑于 {{ formatDateTime(article.updatedAt) }}</text>
          </view>
        </view>
        <view class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
          {{ isFollowed ? '已关注' : '关注' }}
        </view>
      </view>
      
      <!-- 文章统计 -->
      <view class="article-stats">
        <view class="stat-item">
          <text class="iconfont icon-eye"></text>
          <text>{{ article.viewCount }} 阅读</text>
        </view>
        <view class="stat-item">
          <text class="iconfont icon-like"></text>
          <text>{{ article.likeCount }} 点赞</text>
        </view>
        <view class="stat-item">
          <text class="iconfont icon-comment"></text>
          <text>{{ article.commentCount }} 评论</text>
        </view>
      </view>
    </view>
    
    <!-- 文章正文 -->
    <view class="article-content">
      <rich-text :nodes="article.content"></rich-text>
    </view>
    
    <!-- 文章时间信息 -->
    <view class="article-meta">
      <view class="meta-item">
        <text class="meta-label">发布时间：</text>
        <text class="meta-value">{{ formatDateTime(article.createdAt) }}</text>
      </view>
      <view class="meta-item" v-if="article.updatedAt !== article.createdAt">
        <text class="meta-label">最后编辑：</text>
        <text class="meta-value">{{ formatDateTime(article.updatedAt) }}</text>
      </view>
    </view>
    
    <!-- 互动操作栏 -->
    <view class="action-bar">
      <view class="action-btn" :class="{ 'active': isLiked }" @click="toggleLike">
        <text class="iconfont icon-like"></text>
        <text>{{ isLiked ? '已点赞' : '点赞' }}</text>
      </view>
      <view class="action-btn" @click="showCommentInput = true">
        <text class="iconfont icon-comment"></text>
        <text>评论</text>
      </view>
      <view class="action-btn" @click="shareArticle">
        <text class="iconfont icon-share"></text>
        <text>分享</text>
      </view>
      <view class="action-btn">
        <text class="iconfont icon-star"></text>
        <text>{{ isCollected ? '已收藏' : '收藏' }}</text>
      </view>
    </view>
    
    <!-- 评论区 -->
    <view class="comment-section">
      <view class="section-header">
        <text class="section-title">评论 ({{ comments.length }})</text>
      </view>
      
      <!-- 评论列表 -->
      <view class="comment-list" v-if="comments.length > 0">
        <view class="comment-item" v-for="(comment, index) in comments" :key="index">
          <image class="comment-avatar" :src="comment.userAvatar" mode="aspectFill"></image>
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-author">{{ comment.userName }}</text>
              <text class="comment-time">{{ formatRelativeTime(comment.createdAt) }}</text>
            </view>
            <view class="comment-text">{{ comment.content }}</view>
            <view class="comment-actions">
              <view class="comment-action" @click="toggleCommentLike(comment)">
                <text class="iconfont icon-like" :class="{ 'active': comment.isLiked }"></text>
                <text>{{ comment.likeCount || 0 }}</text>
              </view>
              <view class="comment-action" @click="replyComment(comment)">
                <text class="iconfont icon-reply"></text>
                <text>回复</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空评论提示 -->
      <view class="empty-comments" v-else>
        <text class="iconfont icon-empty"></text>
        <text>暂无评论，快来发表第一条评论吧</text>
      </view>
    </view>
    
    <!-- 评论输入弹窗 -->
      <uni-popup ref="commentPopup" type="bottom" :maskClick="false">
        <view class="comment-popup">
          <view class="popup-header">
            <text class="popup-title">写评论</text>
            <text class="popup-close" @click="closeCommentPopup">取消</text>
          </view>
          <view class="comment-input-wrapper">
            <textarea 
              v-model="commentContent" 
              class="comment-input" 
              placeholder="写下你的评论..." 
              auto-height 
              maxlength="200"
            ></textarea>
            <view class="char-count">{{ commentContent.length }}/200</view>
          </view>
          <button class="submit-btn" :disabled="!commentContent.trim()" @click="submitComment">发布评论</button>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 模拟文章数据
        article: {
          title: '',
          authorName: '',
          authorAvatar: '',
          content: '',
          viewCount: 0,
          likeCount: 0,
          commentCount: 0,
          createdAt: '',
          updatedAt: ''
        },
        // 评论数据
        comments: [],
        // 交互状态
        isFollowed: false,
        isLiked: false,
        isCollected: false,
        showCommentInput: false,
        commentContent: '',
        replyTo: null,
        // 页面加载状态
        loading: true
      }
    },
    onLoad(options) {
      // 从路由参数获取文章ID
      const articleId = options.id || '1';
      this.loadArticleData(articleId);
      this.loadComments(articleId);
    },
    methods: {
      // 加载文章数据
      loadArticleData(id) {
        // 模拟从API获取数据
        // 实际项目中应该调用真实接口
        const now = new Date();
        // 根据不同ID返回不同文章内容
        let articleContent = '';
        let title = '';
        let createdTime, updatedTime;
        
        if (id.startsWith('1')) {
          // 关注分类的文章
          title = '如何培养艺术感知力？专业艺术家分享5个实用技巧';
          createdTime = new Date(now.getTime() - 10 * 60 * 1000); // 10分钟前
          updatedTime = new Date(now.getTime() - 5 * 60 * 1000);  // 5分钟前
          articleContent = `
            <h2>艺术感知力的重要性</h2>
            <p>艺术感知力是我们理解和欣赏艺术作品的基础能力。它不仅能够帮助我们发现生活中的美好，还能提升我们的创造力和审美水平。</p>
            
            <h3>技巧一：保持好奇心和开放心态</h3>
            <p>培养艺术感知力的第一步是保持好奇心，对周围的世界保持开放的心态。不要急于判断一个作品的好坏，而是尝试理解艺术家想要表达的情感和思想。</p>
            
            <blockquote>"艺术不是为了被理解，而是为了被感受。" —— 巴勃罗·毕加索</blockquote>
            
            <h3>技巧二：学习艺术基础知识</h3>
            <p>了解艺术史、艺术理论和不同艺术流派的特点，可以帮助我们更好地理解艺术作品。但不要让知识限制你的感受，保持直觉和情感反应同样重要。</p>
            
            <h3>技巧三：多接触不同类型的艺术</h3>
            <p>不要仅限于一种艺术形式，尝试欣赏绘画、雕塑、音乐、舞蹈、戏剧等多种艺术。不同类型的艺术可以相互启发，帮助我们形成更全面的艺术感知。</p>
            
            <h3>技巧四：创作实践</h3>
            <p>亲自参与艺术创作是提高感知力的有效方法。即使你不是专业艺术家，也可以通过绘画、写作、摄影等方式表达自己。创作过程会让你更深入地理解艺术的本质。</p>
            
            <h3>技巧五：分享和讨论</h3>
            <p>与他人分享你的艺术体验，讨论不同的观点和感受，可以拓展你的视野，发现作品中你可能忽略的细节和意义。</p>
            
            <p>培养艺术感知力是一个持续的过程，需要时间和耐心。通过以上方法，你可以逐渐提高自己的艺术鉴赏能力，丰富自己的精神世界。</p>
          `;
        } else if (id.startsWith('2')) {
          // 推荐分类的文章
          title = '色彩搭配的艺术：如何让你的作品更有感染力';
          createdTime = new Date(now.getTime() - 30 * 60 * 1000); // 30分钟前
          updatedTime = new Date(now.getTime() - 25 * 60 * 1000); // 25分钟前
          articleContent = `
            <h2>色彩理论基础</h2>
            <p>色彩是艺术创作中最具表现力的元素之一。了解色彩理论的基础知识，如原色、间色、互补色、色温等，可以帮助你创作出更和谐、更有表现力的作品。</p>
            
            <h3>色彩的心理效应</h3>
            <p>不同的色彩会引起不同的心理反应。红色通常与激情、活力相关，蓝色让人联想到平静和信任，绿色则代表自然和成长。了解这些心理效应，可以让你的色彩选择更有针对性。</p>
            
            <blockquote>"色彩是我们感知世界的第一要素，也是最能直接影响情绪的视觉元素。"</blockquote>
            
            <h3>实用的色彩搭配技巧</h3>
            <p>1. <strong>单色搭配</strong>：使用同一色相的不同明度和纯度，可以创造出和谐统一的效果。</p>
            <p>2. <strong>互补色搭配</strong>：使用色环上相对的颜色，如红与绿、蓝与橙等，可以创造出强烈的对比效果。</p>
            <p>3. <strong>类似色搭配</strong>：使用色环上相邻的颜色，如红与橙、蓝与紫等，可以创造出柔和协调的效果。</p>
            <p>4. <strong>三角色彩搭配</strong>：在色环上选择等距离的三个颜色，可以创造出平衡而丰富的效果。</p>
            
            <h3>色彩在不同艺术形式中的应用</h3>
            <p>不同的艺术形式对色彩的运用有不同的要求。绘画中注重色彩的层次感和表现力，摄影中强调色彩的真实性和氛围营造，设计中则更关注色彩的功能性和识别度。</p>
            
            <h3>色彩实践与练习</h3>
            <p>通过分析大师作品的色彩运用，尝试不同的配色方案，记录自己的感受和观众的反馈，可以不断提高自己的色彩运用能力。记住，实践是提高色彩感知和运用能力的最佳途径。</p>
          `;
        } else if (id.startsWith('3')) {
          // 发现分类的文章
          title = '街头艺术：城市文化的新表达形式';
          createdTime = new Date(now.getTime() - 5 * 60 * 60 * 1000); // 5小时前
          updatedTime = createdTime; // 未修改
          articleContent = `
            <h2>街头艺术的起源与发展</h2>
            <p>街头艺术起源于20世纪70年代的纽约，最初是城市青年表达自我和社会批判的一种方式。随着时间的推移，街头艺术逐渐从地下走向主流，成为当代艺术的重要组成部分。</p>
            
            <h3>街头艺术的主要形式</h3>
            <p>街头艺术包括涂鸦、壁画、贴纸、装置艺术等多种形式。每种形式都有其独特的表现力和技术要求。现代街头艺术家不断创新，结合数字技术和传统媒介，创造出更加丰富多样的作品。</p>
            
            <blockquote>"街头艺术是城市的声音，是未被过滤的真实表达。"</blockquote>
            
            <h3>著名街头艺术家及其作品</h3>
            <p>班克斯（Banksy）是当今最著名的街头艺术家之一，他的作品以幽默、讽刺和社会批判性著称。其他如Keith Haring、Shepard Fairey等艺术家也对街头艺术的发展产生了深远影响。</p>
            
            <h3>街头艺术与城市文化</h3>
            <p>街头艺术不仅是一种艺术形式，更是城市文化的重要组成部分。它反映了城市的历史、社会问题和文化多样性，为城市空间注入了活力和创意。越来越多的城市开始认可街头艺术的价值，举办相关展览和艺术节。</p>
            
            <h3>街头艺术的争议与未来</h3>
            <p>尽管街头艺术越来越受到认可，但它仍然面临着合法性、商业化等问题的挑战。未来，随着技术的发展和社会观念的变化，街头艺术可能会以新的形式继续发展，但其核心——自由表达和社会批判的精神将保持不变。</p>
          `;
        } else {
          // 热门分类的文章
          title = '2024年最值得关注的十大艺术展览';
          createdTime = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000); // 2天前
          updatedTime = new Date(now.getTime() - 1 * 24 * 60 * 60 * 1000); // 1天前
          articleContent = `
            <h2>全球艺术展览概览</h2>
            <p>2024年将是艺术展览的丰收年，全球各大博物馆和画廊将推出众多精彩展览。这些展览涵盖了从古典艺术到当代艺术的各个领域，为艺术爱好者提供了丰富的文化盛宴。</p>
            
            <h3>1. 毕加索：立体主义的革命（巴黎卢浮宫）</h3>
            <p>为纪念毕加索诞辰143周年，卢浮宫将举办迄今为止规模最大的毕加索立体主义作品回顾展，展出超过200件珍贵作品。</p>
            
            <h3>2. 未来主义：100年后的回响（纽约现代艺术博物馆）</h3>
            <p>本次展览将回顾未来主义运动的历史，并展示其对当代艺术和设计的深远影响，是一次跨越时空的艺术对话。</p>
            
            <h3>3. 丝绸之路：东西方艺术的交融（伦敦大英博物馆）</h3>
            <p>通过展出丝绸之路上的艺术品，探讨东西方文化交流的历史和艺术影响，展现人类文明的多样性和共同性。</p>
            
            <blockquote>"艺术展览不仅是作品的展示，更是文化的交流和思想的碰撞。"</blockquote>
            
            <h3>4. 数字艺术的崛起（东京森美术馆）</h3>
            <p>聚焦数字艺术的最新发展，展示AI艺术、沉浸式装置、虚拟现实艺术等前沿作品，探讨技术与艺术的融合。</p>
            
            <h3>5. 女性艺术家：被忽视的声音（华盛顿国家美术馆）</h3>
            <p>重新审视艺术史上被忽视的女性艺术家的贡献，展出从文艺复兴到当代的女性艺术家作品，是一次重要的艺术史重新书写。</p>
            
            <h3>6. 街头艺术：从地下到主流（洛杉矶当代艺术博物馆）</h3>
            <p>追踪街头艺术的发展历程，展出包括班克斯、KAWS等知名街头艺术家的作品，探讨街头文化与当代艺术的关系。</p>
            
            <h3>7. 自然与艺术：生态视角下的创作（威尼斯双年展）</h3>
            <p>2024年威尼斯双年展将以"自然的回响"为主题，邀请全球艺术家探讨环境问题和可持续发展，是艺术与社会责任结合的重要平台。</p>
            
            <h3>8. 亚洲当代艺术展（上海当代艺术博物馆）</h3>
            <p>汇聚亚洲各国当代艺术家的最新作品，展现亚洲艺术的多样性和创新性，促进区域内的艺术交流。</p>
            
            <h3>9. 摄影的艺术：从记录到表达（柏林摄影博物馆）</h3>
            <p>探讨摄影作为艺术形式的发展历程，展出从早期摄影到当代数字摄影的代表作品，展示摄影艺术的演变和多样性。</p>
            
            <h3>10. 艺术与科技：未来的对话（旧金山现代艺术博物馆）</h3>
            <p>探索艺术与新兴技术的互动关系，展出结合人工智能、区块链、生物艺术等前沿技术的创新作品，展望艺术的未来发展方向。</p>
            
            <p>这些展览不仅是艺术的盛宴，也是了解不同文化、思考当代议题的重要窗口。无论你是艺术专业人士还是普通爱好者，都能从中获得启发和享受。</p>
          `;
        }
        
        this.article = {
          id: id,
          title: title,
          authorName: id.startsWith('1') ? '艺术家小王' : 
                     id.startsWith('2') ? '创意设计师' :
                     id.startsWith('3') ? '街头艺术家' : '艺术策展人',
          authorAvatar: '/static/logo.png',
          content: articleContent,
          viewCount: Math.floor(Math.random() * 2000) + 500,
          likeCount: Math.floor(Math.random() * 300) + 50,
          commentCount: Math.floor(Math.random() * 100) + 10,
          createdAt: createdTime.toISOString(),
          updatedAt: updatedTime.toISOString()
        };
        
        this.loading = false;
      },
      
      // 加载评论数据
      loadComments(articleId) {
        // 模拟评论数据
        this.comments = [
          {
            id: 1,
            userName: '前端爱好者',
            userAvatar: '/static/logo.png',
            content: '这篇文章写得很全面，对我很有帮助！特别赞同组件化开发的重要性。',
            createdAt: new Date(Date.now() - 30 * 60 * 1000).toISOString(), // 30分钟前
            likeCount: 5,
            isLiked: false
          },
          {
            id: 2,
            userName: '技术小白',
            userAvatar: '/static/logo.png',
            content: '请问性能优化方面有什么具体的建议吗？我正在做的项目加载速度有点慢。',
            createdAt: new Date(Date.now() - 60 * 60 * 1000).toISOString(), // 1小时前
            likeCount: 2,
            isLiked: true
          },
          {
            id: 3,
            userName: '全栈工程师',
            userAvatar: '/static/logo.png',
            content: '状态管理部分可以再深入一点，Redux Toolkit和Vue 3的Composition API都是很好的实践。',
            createdAt: new Date(Date.now() - 90 * 60 * 1000).toISOString(), // 1.5小时前
            likeCount: 8,
            isLiked: false
          }
        ];
      },
      
      // 格式化日期时间
      formatDateTime(dateTime) {
        const date = new Date(dateTime);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      },
      
      // 格式化相对时间
      formatRelativeTime(dateTime) {
        const now = new Date();
        const past = new Date(dateTime);
        const diffMs = now - past;
        const diffMins = Math.floor(diffMs / (1000 * 60));
        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
        
        if (diffMins < 1) return '刚刚';
        if (diffMins < 60) return `${diffMins}分钟前`;
        if (diffHours < 24) return `${diffHours}小时前`;
        if (diffDays < 30) return `${diffDays}天前`;
        return this.formatDateTime(dateTime);
      },
      
      // 关注/取消关注作者
      toggleFollow() {
        this.isFollowed = !this.isFollowed;
        uni.showToast({
          title: this.isFollowed ? '关注成功' : '取消关注',
          icon: 'none'
        });
      },
      
      // 点赞/取消点赞文章
      toggleLike() {
        this.isLiked = !this.isLiked;
        this.article.likeCount += this.isLiked ? 1 : -1;
        uni.showToast({
          title: this.isLiked ? '点赞成功' : '取消点赞',
          icon: 'none'
        });
      },
      
      // 点赞/取消点赞评论
      toggleCommentLike(comment) {
        comment.isLiked = !comment.isLiked;
        comment.likeCount += comment.isLiked ? 1 : -1;
      },
      
      // 回复评论
      replyComment(comment) {
        this.replyTo = comment;
        this.commentContent = `回复 @${comment.userName}：`;
        this.showCommentInput = true;
        this.$refs.commentPopup.open();
      },
      
      // 分享文章
      shareArticle() {
        uni.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline']
        });
      },
      
      // 发布评论
      submitComment() {
        if (!this.commentContent.trim()) {
          return;
        }
        
        // 添加新评论
        const newComment = {
          id: Date.now(),
          userName: '我',
          userAvatar: '/static/logo.png',
          content: this.commentContent.trim(),
          createdAt: new Date().toISOString(),
          likeCount: 0,
          isLiked: false,
          replyTo: this.replyTo
        };
        
        this.comments.unshift(newComment);
        this.article.commentCount += 1;
        
        // 清空输入
        this.commentContent = '';
        this.replyTo = null;
        this.showCommentInput = false;
        // 安全关闭评论弹窗
        if (this.$refs.commentPopup) {
          this.$refs.commentPopup.close();
        }
        
        uni.showToast({
          title: '评论发布成功',
          icon: 'success'
        });
      },
      
      // 关闭评论弹窗
      closeCommentPopup() {
        this.commentContent = '';
        this.replyTo = null;
        this.$refs.commentPopup.close();
      }
    },
    watch: {
      showCommentInput(val) {
        if (val && this.$refs.commentPopup) {
          this.$refs.commentPopup.open();
        }
      }
    }
  }
</script>

<style scoped>
  .article-detail-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100rpx;
  }
  
  /* 文章头部 */
  .article-header {
    background-color: #ffffff;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;
  }
  
  .article-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333333;
    line-height: 1.4;
    margin-bottom: 30rpx;
  }
  
  /* 作者信息 */
  .author-section {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .author-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .author-info {
    flex: 1;
  }
  
  .author-name {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8rpx;
  }
  
  .publish-time {
    font-size: 24rpx;
    color: #999999;
  }
  
  .update-time {
    color: #666666;
  }
  
  .follow-btn {
    padding: 10rpx 30rpx;
    background-color: #1989fa;
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 40rpx;
    transition: all 0.2s ease;
  }
  
  .follow-btn.followed {
    background-color: #f0f0f0;
    color: #666666;
  }
  
  /* 文章统计 */
  .article-stats {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    margin-right: 30rpx;
    font-size: 24rpx;
    color: #999999;
  }
  
  .stat-item .iconfont {
    margin-right: 8rpx;
    font-size: 26rpx;
  }
  
  /* 文章正文 */
  .article-content {
    background-color: #ffffff;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;
    line-height: 1.8;
  }
  
  .article-content :deep(h2) {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
  }
  
  .article-content :deep(h3) {
    font-size: 32rpx;
    font-weight: bold;
    color: #444444;
    margin-top: 30rpx;
    margin-bottom: 16rpx;
  }
  
  .article-content :deep(p) {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 20rpx;
    text-indent: 56rpx;
  }
  
  .article-content :deep(blockquote) {
    background-color: #f5f5f5;
    border-left: 6rpx solid #1989fa;
    padding: 20rpx;
    margin: 20rpx 0;
    font-size: 26rpx;
    color: #777777;
  }
  
  /* 文章时间信息 */
  .article-meta {
    background-color: #ffffff;
    padding: 30rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    text-align: center;
  }
  
  .meta-item {
    display: inline-flex;
    align-items: center;
    margin: 0 20rpx 16rpx 0;
    padding: 8rpx 20rpx;
    background-color: #f8f8f8;
    border-radius: 30rpx;
  }
  
  .meta-item:last-child {
    margin-bottom: 0;
  }
  
  .meta-label {
    font-size: 26rpx;
    color: #666666;
    margin-right: 10rpx;
    font-weight: 500;
  }
  
  .meta-value {
    font-size: 26rpx;
    color: #333333;
    font-weight: 600;
  }
  
  /* 加载状态 */
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
  }
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999999;
  }
  
  /* 互动操作栏 */
  .action-bar {
    display: flex;
    background-color: #ffffff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
  }
  
  .action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    transition: all 0.2s ease;
  }
  
  .action-btn:active {
    background-color: #f0f0f0;
    border-radius: 10rpx;
  }
  
  .action-btn .iconfont {
    font-size: 36rpx;
    color: #666666;
    margin-bottom: 8rpx;
  }
  
  .action-btn.active .iconfont {
    color: #1989fa;
  }
  
  .action-btn text {
    font-size: 24rpx;
    color: #666666;
  }
  
  .action-btn.active text {
    color: #1989fa;
  }
  
  /* 评论区 */
  .comment-section {
    background-color: #ffffff;
    padding: 30rpx 20rpx;
    border-radius: 16rpx;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  
  /* 评论列表 */
  .comment-list {
    margin-bottom: 20rpx;
  }
  
  .comment-item {
    display: flex;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .comment-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .comment-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .comment-content {
    flex: 1;
  }
  
  .comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;
  }
  
  .comment-author {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
  }
  
  .comment-time {
    font-size: 22rpx;
    color: #999999;
  }
  
  .comment-text {
    font-size: 26rpx;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 16rpx;
    word-break: break-word;
  }
  
  .comment-actions {
    display: flex;
    align-items: center;
  }
  
  .comment-action {
    display: flex;
    align-items: center;
    margin-right: 30rpx;
    font-size: 24rpx;
    color: #999999;
  }
  
  .comment-action .iconfont {
    margin-right: 6rpx;
    font-size: 24rpx;
  }
  
  .comment-action .iconfont.active {
    color: #1989fa;
  }
  
  /* 空评论提示 */
  .empty-comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    color: #999999;
  }
  
  .empty-comments .iconfont {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-comments text {
    font-size: 26rpx;
  }
  
  /* 评论弹窗 */
  .comment-popup {
    background-color: #ffffff;
    padding: 0 30rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    max-height: 70vh;
  }
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .popup-close {
    font-size: 28rpx;
    color: #999999;
  }
  
  .comment-input-wrapper {
    padding: 30rpx 0;
    position: relative;
  }
  
  .comment-input {
    width: 100%;
    min-height: 120rpx;
    font-size: 28rpx;
    color: #333333;
    border: 1rpx solid #e0e0e0;
    border-radius: 16rpx;
    padding: 20rpx;
    padding-bottom: 50rpx;
    box-sizing: border-box;
    background-color: #f8f8f8;
  }
  
  .char-count {
    position: absolute;
    right: 30rpx;
    bottom: 40rpx;
    font-size: 22rpx;
    color: #999999;
  }
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #1989fa;
    color: #ffffff;
    font-size: 30rpx;
    border-radius: 40rpx;
    margin-bottom: 30rpx;
  }
  
  .submit-btn:disabled {
    background-color: #c0c4cc;
  }
</style>